<template style="">
	<el-container style = "height: 100% ;  " >
	  <el-header >
		<span style="text-align: left; color: salmon; font-size: 32px; margin-right: 80%; ">
			后端管理系统
		</span>
		<el-dropdown>
		  <i class="el-icon-user" style="margin-right: 15px"></i>
		  <el-dropdown-menu slot="dropdown">
			<el-dropdown-item>个人中心</el-dropdown-item>
			<el-dropdown-item>修改密码</el-dropdown-item>
			<el-dropdown-item><span @click="loginOut()">退出</span>
				
			</el-dropdown-item>
		  </el-dropdown-menu>
		</el-dropdown>
		<span>{{account}}</span>  
	  </el-header>
	  <el-container>
		<el-aside width="200px">
			  <el-menu :default-openeds="['1']" router>
				  <el-submenu index="1">
					<template slot="title"><i class="el-icon-message"></i>功能菜单</template>
					  <el-menu-item :key = "index" :index="menu.url" v-for="(menu,index) in menus" >{{menu.name}}</el-menu-item>
				  </el-submenu>
				</el-menu>
		</el-aside>
		<el-container>
		  <el-main>
			 <router-view></router-view>
		  </el-main>
		  <el-footer>Footer</el-footer>
		</el-container>
	  </el-container>
	</el-container>
	
</template>

<script>
	export default {
		name : 'Main',
		data(){
			return{
				account:"",
				menus:[],
			}
			
		},
		methods: {
			
			
			
			loginOut() {
				this.$confirm('您是否要退出？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					window.sessionStorage.clear();
					this.$router.replace("/login");
					
				})
			}
			
		},
		mounted(){
			this.account = window.sessionStorage.getItem("account");
			this.$http.get("admin/loginCtl/findMenusByUserId").then((resp)=>{
				if(resp.data.code == 200){
					this.menus = resp.data.data;
				}
				
			})
		}
	}
	
	
</script>

<style>
	
	.el-footer {
	    background-color: #B3C0D1;
	    color: #333;
	    text-align: center;
	    line-height: 60px;
	  }
	  .el-header{
		  background-color: #F0F9EB;
		  color: #333;
		  text-align: right;
		  line-height: 60px;
		  background-image: url(../assets/banner01.jpg) ;
		}
	  .el-aside {
	    background-color: #D3DCE6;
	    color: #333;
	    text-align: center;
	    line-height: 200px;
	  }
	  
	  .el-main {
		/* background-color: hsla(120, 60%, 70%, 0.3); opacity:0.9 */
		background-color:rgb(240,255,255);
	    color: #333;
	   
	  }
	  
	 
</style>
